<template>
	<view class="order-container " :class="themeStyle">
		<scroll-view id="tab-bar" class="order-nav" :scroll-x="true" :show-scrollbar="false" :scroll-into-view="scrollInto">
			<view v-for="(statusItem, statusIndex) in statusList" :key="statusIndex" class="uni-tab-item" :id="statusItem.id"
			 :data-current="statusIndex" @click="ontabtap">
				<text class="uni-tab-item-title" :class="statusItem.status == orderStatus ? 'uni-tab-item-title-active ns-border-color ns-text-color' : ''">{{ statusItem.name }}</text>
			</view>
		</scroll-view>

		<mescroll-uni ref="mescroll" @getData="getListData" top="90rpx">
			<block slot="list">
				<view class="order-list" v-if="orderList.length > 0">
					<view class="order-list-item" v-for="(item,index) in orderList">
						<view class="orderl-list-items">
							<text class="title order-number">{{ item.delivery_no }}</text>
							<text class="name" style="visibility: hidden;">已送达{{item.status}}</text>
							<text class="order-status" v-if="item.status == 1">配货中</text>
							<text class="order-status" v-if="item.status == 0">待配货</text>
							<text class="order-status" v-if="item.status == 2">已送达</text>
						</view>
						<view class="orderl-list-item-line"></view>
						<view class="orderl-list-items">
							<text class="title">配送商家</text>
							<text class="name">{{ item.site_info.site_name }}</text>
						</view>
						<view class="orderl-list-items">
							<text class="title">商家电话</text>
							<view class="name"><image :src="$util.img('upload/uniapp/pick_up/pickup-phone.png')" mode="aspectFill"></image>{{ item.site_info.telephone }}</view>
						</view>
						<view class="orderl-list-items">
							<text class="title">订单数</text>
							<text class="name">当前小计{{ item.order_count }}件</text>
						</view>
						<view class="orderl-list-items">
							<text class="title">创建时间</text>
							<text class="name timename">{{ $util.timeStampTurnTime(item.create_time ) }}</text>
						</view>
						<view class="orderl-list-item-line"></view>
						<view class="orderl-list-items">
							<text class="title order-sum">共{{item.order_goods_count}}件商品</text>
							<text class="order-detail" @click="is_send(item.delivery_id)" v-if="item.status == 1">送达</text><!--v-if="item.status == 1"  -->
							<text class="order-detail" @click="toDetail(item.delivery_id)">配送详情</text>
						</view>
					</view>
				</view>
				<view v-else>
					<ns-empty :isIndex="!1" :text="text"></ns-empty>
				</view>
			</block>
		</mescroll-uni>
		
		<uni-popup ref="is_send" :maskClick="false">
			<view class="sku-edit">
				<view class="img-goods">
					<view class="img-goods-info">
						<view class="goods-info-title">
						确认要送达提货点吗？
						</view>
					</view>
				</view>
				<view class="goods-price-item">
					<button type="default" class="save_goods_sku" @click="pickedup(curId)">确定</button>
					<button type="default" class="save_goods_sku" @click="closePop()">取消</button>
				</view>
			</view>			
		</uni-popup>

		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>

	export default {
		data() {
			return {
				scrollInto: '',
				orderStatus: '',
				statusList: [],
				orderList: [],
				contentText: {},
				mergePayOrder: [],
				text:'您还暂无相关订单',
				curId: 0,
			};
		},
		onLoad(option) {
			if (option.status) this.orderStatus = option.status;
		},
		onShow() {
			// 刷新多语言
			this.$langConfig.refresh();
			this.getOrderStatus();

			if (uni.getStorageSync('token')) {
				if (this.$refs.mescroll) this.$refs.mescroll.refresh();
			} else {
				this.$util.redirectTo('/pages/login/login/login', {
					back: '/promotionpages/order/list/list?status=' + this.orderStatus
				});
			}
		},
		methods: {
			//关闭弹框
			closePop() {
				this.$refs.is_send.close();
			},
			//已送达自提点操作
			is_send(id) {
				this.$refs.is_send.open();
				this.curId = id;
			},
			pickedup(id) {
				this.closePop();
				this.$api.sendRequest({
					url: '/pickpoint/api/order/orderService',
					data: {
						delivery_id: id,
					},
					success: res => {
						if(res.code == 0 && res.data) {
							this.$util.showToast({
								title: '已送达自提点',
							})
							this.$refs.mescroll.refresh();
						}else {
							this.$util.showToast({
								title: res.message,
							});
						}
					},
					fail: res => {
						this.$util.showToast({
							title: res.message,
						});
					}
				});
			},
			toDetail(id) {
				this.$util.redirectTo('/promotionpages/order/distribution/detail',{delivery_id: id});
			},
			ontabtap(e) {
				let index = e.target.dataset.current || e.currentTarget.dataset.current;
				console.log(index)
				this.orderStatus = this.statusList[index].status;
				if(this.orderStatus == '' ){
					this.text = '您还暂无相关订单'
				}else if(this.orderStatus == '0' ){
					this.text = '您还暂无待配送订单'
				}else if(this.orderStatus == '1' ){
					this.text = '您还暂无待配送中订单'
				}else if(this.orderStatus == '2' ){
					this.text = '您还暂无已送达订单'
				}else{
					this.text = '您还暂无订单'
				}
				if (this.orderStatus == '') this.mergePayOrder = [];
				this.$refs.loadingCover.show();
				this.$refs.mescroll.refresh();
			},
			getListData(mescroll) {
				this.$api.sendRequest({
					url: '/pickpoint/api/order/lists',
					data: {
						page: mescroll.num,
						page_size: mescroll.size,
						status: this.orderStatus,
					},
					success: res => {
						if(res.code==-1&&res.error_code=='TOKEN_ERROR'){
							this.$util.showToast({'title':'登录失败'});
							let pageRouter=getCurrentPages();
							let data=pageRouter[pageRouter.length-1].options;
							let back=pageRouter[pageRouter.length-1].route;
							data.back=back;
							setTimeout(()=>{
								this.$util.redirectTo('/pages/login/login/login', data);
							},1500)
							return;
						}
						let newArr = []
						let msg = res.message;
						if (res.code == 0 && res.data) {
							newArr = res.data.list;
						} else {
							this.$util.showToast({
								title: msg
							})
						}
						mescroll.endSuccess(newArr.length);
						//设置列表数据
						if (mescroll.num == 1) this.orderList = []; //如果是第一页需手动制空列表
						this.orderList = this.orderList.concat(newArr); //追加新数据
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					},
					fail: res => {
						mescroll.endErr();
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},
			/**
			 * 获取订单状态
			 */
			getOrderStatus() {
				this.statusList = [{
						status: '',
						name: '全部',
						id: 'status_0'
					},
					{
						status: '0',
						name: '待配送',
						id: 'status_1'
					},
					{
						status: '1',
						name: '配送中',
						id: 'status_2'
					},
					{
						status: '2',
						name: '已送达',
						id: 'status_3'
					}
				];
			},
			imageError(orderIndex, goodsIndex) {
				this.orderList[orderIndex].order_goods[goodsIndex].sku_image = this.$util.getDefaultImage().default_goods_img;
				this.$forceUpdate();
			},
			toShopDetail(e){
				this.$util.redirectTo('/otherpages/shop/index/index', { site_id: e});
			}
		},
		computed: {
			mpOrderList() {
				if (!this.orderList[this.status]) return;
				return this.orderList[this.status].list || [];
			},
			//vueX页面主题
			themeStyle() {
				return 'theme-' + this.$store.state.themeStyle
			}
		}
	};
</script>

<style lang="scss">
	//@import '../public/css/list.scss';
	
	.sku-edit {
		width: 600rpx;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 60rpx 40rpx 30rpx 40rpx;
		.goods-price-item {
			display: flex;
			justify-content: space-between;
			height: 70rpx;
			
			.save_goods_sku {
				width: 50%;
				height: 80rpx;
				line-height: 80rpx;
				margin:0;
				text-align: center;
				background-color: #FF4544;
				color: #fff;
				margin: 0 10rpx;
			}
		}
		
		.goods-price-info {
			display: flex;
			flex-direction: column;
			
			.goods-price-item {
				display: flex;
				justify-content: space-between;
				height: 70rpx;
				
				.save_goods_sku {
					width: 100%;
					height: 80rpx;
					line-height: 80rpx;
					margin:0;
					text-align: center;
					background-color: #FF4544;
					color: #fff;
				}
				
				.price {
					color: #909399;
				}
				.price-info {
					display: flex;
					
					.price-logo {
						font-size: $ns-font-size-sm;
						font-weight: 600;
						margin-top: 4rpx;
					}
					
					.price-size {
						font-size: $ns-font-size-lg;
						font-weight: 600;
						color: #303133;
					}
					
					.price-logo-active {
						color: #FF4544;
						font-size: $ns-font-size-sm;
					}
					.price-size-input {
						display: inline-block;
						text-align: right;
						color:#FF4544;
						font-size: $ns-font-size-lg;
						width: 110rpx;
					}
				}
			}
			
			.goods-price-item-input{
				height: 90rpx;
			}
		}
		
		.img-goods {
			display: flex;
			
			
			.imgs-goods-detail {
				border-radius: 20rpx;
				overflow: hidden;
				
				.img-box {
					width: 200rpx;
					height: 200rpx;
					border-radius: 20rpx;
					vertical-align: middle;
				}
			}
			
			.img-goods-info {
				display: flex;
				justify-content: space-around;
				align-items: center;
				height: 200rpx;
				text-align: center;
				
				.goods-info-title {
					letter-spacing: 0;
					font-weight: 600;
					line-height: 1.2;
					font-size: $ns-font-size-lg;
					color: #303133;
				}
				
				.goods-info-descs {
					display: flex;
					.goods-info-item {
						color: #909399;
						padding-right: $ns-padding;
					}
				}
			}
		}
		
		.close-icon {
			position: relative;
	
			.close-icon-text{
				position:absolute;
				top:-80rpx;
				right: -32rpx;
				display: inline-block;
				transform: rotate(45deg);
				font-weight: 100;
				font-size: 60rpx;
				color: #909399;
			}
		}
	}
	
	.order-nav {
		width: 100vw;
		height: 70rpx;
		flex-direction: row;
		white-space: nowrap;
		background: #fff;
		// border-bottom-left-radius: 24rpx;
		// border-bottom-right-radius: 24rpx;
		padding-bottom: 10rpx;
		padding-top: 10rpx;
		position: fixed;
		left: 0;
		z-index: 998;
	
		.uni-tab-item {
			display: inline-block;
			flex-wrap: nowrap;
			// padding-left: 10rpx;
			// padding-right: 10rpx;
			padding-left: 40rpx;
			padding-right: 40rpx;
		}
	
		.uni-tab-item-title {
			color: #555;
			font-size: 30rpx;
			display: block;
			height: 64rpx;
			line-height: 64rpx;
			border-bottom: 2px solid #fff;
			padding: 0 10rpx;
			flex-wrap: nowrap;
			white-space: nowrap;
		}
	
		.uni-tab-item-title-active {
			display: block;
			height: 64rpx;
			border-bottom: 2px solid #ffffff;
			padding: 0 10rpx;
		}
	
		::-webkit-scrollbar {
			width: 0;
			height: 0;
			color: transparent;
		}
	}
	
	
	.order-list {
		padding: $ns-padding $ns-padding;
		background-color: #eeeeee;
		height: 100vh;
		
		.order-list-item {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			box-sizing: border-box;
			padding: $ns-padding $ns-padding;
			border: 1px solid #ddd;
			margin-bottom: 30rpx;
			border-radius: 40rpx;
			background-color: #fff;
		
			.orderl-list-items {
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				align-items: flex-start;
				padding: 4rpx 2*$ns-padding;
				text-align: center;
				position: relative;
				
				
				
				.title {
					font-size: $ns-font-size-base;
					color:#333;
					width: 300rpx;
					text-align: left;
				}
				.name {
					font-size: $ns-font-size-base;
					width: 500rpx;
					color:#333;
					text-align: right;
					margin-left: 200rpx;
					image {
						width: 24rpx;
						height: 24rpx;
					}
				}
				
				.timename {
					margin-left: 0;
				}
				.order-number {
					font-size: $ns-font-size-sm;
					line-height: 2;
					color:#111;
				}
				.order-status {
					position: absolute;
					right: 40rpx;
					top:0;
					color:#ff335c;
				}
				.phone {
					font-size: $ns-font-size-base;
					color:#000;
					
					image {
						width: 24rpx;
						height: 24rpx;
					}
				}
				
				.order-addr-title {
					font-size: $ns-font-size-base;
					color:#000;
				}
				.order-addr-info {
					font-size: $ns-font-size-base;
					color:#ccc;
				}
				
				.order-sum {
					font-size: $ns-font-size-sm;
					color:#000;
					line-height: 2;
				}
				.order-detail {
					border-radius: 40rpx;
					border: 1px solid #ff335c;
					padding: 0 0 !important;
					color: #ff335c;
					text-align: center;
					font-size: $ns-font-size-base;
					width: 150rpx;
				}
			}
			
			.order-two {
				margin: 0 -100rpx;
			}
			
			.orderl-list-item-line {
				width: 100%;
				margin-left: 5%;
				border-bottom: 1px solid #ddd;
				margin: 10rpx 0;
			}
		}
	}
</style>
<style scoped>
	/deep/ .uni-page {
		overflow: hidden;
	}

	/deep/ .mescroll-upwarp {
		padding-bottom: 100rpx;
	}
	.order-container{
		padding-top:1px;
	}
</style>
